<template>
    <div class="login">
        <!--登录表单-->
        <el-form class="login-form">
            <div class="login-title">
                <span>赣南医学院法学系后台管理系统</span>
            </div>
            <div class="dark-wrap"></div>
            <el-form-item>
                <el-input @keyup.enter.native="login" placeholder="用户名" type="text" v-model="username"/>
            </el-form-item>
            <el-form-item>
                <el-input @keyup.enter.native="login" placeholder="密码" type="password" show-password v-model="password"/>
            </el-form-item>
            <div class="login-forget">
                <span @click="dialogFormVisible = true">忘记密码</span>
            </div>
            <el-form-item>
                <el-button @click="login" class="login-btn gmu-btn">登 录</el-button>
            </el-form-item>
        </el-form>
        <!--找回密码弹出框-->
        <el-dialog :visible.sync="dialogFormVisible" title="找回密码" width="500px">
            <el-form :model="forgetForm">
                <el-form-item>
                    <el-input @keyup.enter.native="forgetPassword" autocomplete="off" placeholder="用户名"
                              v-model="forgetForm.username"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input @keyup.enter.native="forgetPassword" autocomplete="off" placeholder="手机号码"
                              v-model="forgetForm.phoneNumber"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="dialogFormVisible = false" class="gmu-normal-btn">取 消</el-button>
                <el-button @click="forgetPassword" class="gmu-btn" type="success">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                /*登录信息*/
                username: '',
                password: '',
                /*找回密码弹出框状态*/
                dialogFormVisible: false,
                /*找回密码表单信息*/
                forgetForm: {
                    username: '',
                    phoneNumber: ''
                },
                /*状态码，用来判断是否发送请求，是否接收到响应数据*/
                code: '',
                /*loading计时器*/
                timer: null
            }
        },
        methods: {
            /*登录方法*/
            login() {
                /*初始化状态码*/
                this.code = ''
                /*登录时传入对象*/
                let user = {
                    username: this.username,
                    password: this.password
                }
                /*判断登录信息的完整性*/
                if (this.username && this.password) {
                    /*调用loading方法*/
                    this.loading()
                    /*发送登录请求*/
                    this.$https.post('user/login', user).then(res => {
                        this.code = res.data.code
                        /*根据状态码，判断是否登录成功*/
                        if (res.data.code === 200) {
                            localStorage.setItem("token",res.data.token)
                            this.$message.success(res.data.message)
                            this.$router.push('/backstage')
                            this.username = ''
                            this.password = ''
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                } else {
                    this.$message.error("请输入完整的账号密码！")
                }
            },
            /*找回密码方法*/
            forgetPassword() {
                /*初始化状态码*/
                this.code = ''
                const form = this.forgetForm
                /*发送请求时传入的对象*/
                let user = {
                    username: form.username,
                    phoneNumber: form.phoneNumber
                }
                /*判断信息的完整性*/
                if (form.username && form.phoneNumber) {
                    /*调用loading方法*/
                    this.loading()
                    /*发送找回密码的请求*/
                    this.$https.post('user/forgetPassword', user).then(res => {
                        this.code = res.data.code
                        /*根据状态码，展示相应信息*/
                        if (res.data.code === 200) {
                            this.$notify({
                                title: '您的密码',
                                message: res.data.password,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '您的密码',
                                message: '用户名与手机号不匹配！',
                                type: 'error'
                            });
                        }
                        /*关闭找回密码弹出框*/
                        this.dialogFormVisible = false
                        /*清空找回密码弹出框的信息*/
                        form.username = ''
                        form.phoneNumber = ''
                    })
                } else {
                    this.$message.error("请输入完整的用户名和手机号码！")
                }
            },
            /*每 0.2s 执行一次 isLoading 方法*/
            loading() {
                this.timer = setInterval(this.isLoading, 200)
                /*在信息完全的情况下，设置最大请求时间20s*/
                setTimeout(() => {
                    if (this.code === '') {
                        this.$message.error("网络超时，请检查一下您的网络！")
                        this.$store.state.LOADING = false
                        this.code = ''
                        clearInterval(this.timer)
                    }
                }, 20000);
            },
            /*isLoading 方法*/
            isLoading() {
                /*判断后台是否发来状态码，如果没有得到响应数据，则打开loading弹窗*/
                if (this.code === '') {
                    this.$store.state.LOADING = true
                } else {
                    this.$store.state.LOADING = false
                    /*清除计时器，防止第二次请求没有loading弹窗*/
                    clearInterval(this.timer)
                }
            }
        }
    }
</script>

<style scoped src="../../../public/css/pc/login.css">

</style>
